<template>
	<view>
		<view class="header posRel">
			<image class="headerImg samePar" src="../../../static/images/groupService/headerImg.png"></image>
			<image class="headerTxt posAbso" src="../../../static/images/groupService/headerTxt.png"></image>
		</view>
		<view class="serviceWrap">
			<block v-if="isHasDataFlag">
				<view class="serviceItem" @tap="viewDet('')">
					<view class="innerItem">
						<view class="serviceName">
							<view class="num">N个项目</view>
							<view class="lineView">|</view>
							<view class="name ellip">自定义团体服务套餐</view>
						</view>
						<view class="serviceCon">
							<view class="itemCon">
								<view class="comItem ellip">可根据团体需求自选服务项目</view>
							</view>
							<view class="itemConBot spaceBet">
								<view>需与机构商议</view>
								<view class="viewDet">查看详情</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="serviceItem"
					v-for="(item,index) in gsList"
					:key="index"
					 @tap="viewDet(item.id)"
				>
					<view class="innerItem">
						<view class="serviceName">
							<view class="num">{{item.serviceNum}}个项目</view>
							<view class="lineView">|</view>
							<view class="name ellip">{{item.pkgName}}</view>
						</view>
						<view class="serviceCon">
							<view class="itemCon">
								<view class="comItem ellip"
									v-for="(innerItem,innerIndex) in item.pdList.slice(0,3)"
									:key="innerIndex"
									:data-length="3"
								>{{innerItem.serviceName}}</view>
								<view class="comItem ellip" v-if="item.pdList.length > 3">...</view>
							</view>
							<view class="itemConBot spaceBet">
								<view>价格需与机构商议</view>
								<view class="viewDet">查看详情</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else-if="isHasDataFlag == false">
				<view class="serviceItem">
					<view class="innerItem noGsOrder">
						<image class="noGsOrderImg" src="../../../static/images/groupService/noGsData.png"></image>
						<view>暂无记录</view>
					</view>
				</view>
			</block>
			
			
			
		</view>
	</view>
</template>

<script>
	import { getGsList } from '@/api/group/index'
	export default {
		data(){
			return{
				//sysRange:'',
				ogzId:'',
				isHasDataFlag:null,
				gsList:[]
			}
		},
		onLoad(options){
			console.log("hahahah")
			this.ogzId = options.ogzId == undefined ? '' : options.ogzId;
 			this.loadGsList();
		},
		methods:{
			loadGsList(){
				uni.showLoading({title:'加载中...', mask: true });
				var field = {sysRange:uni.getStorageSync('sysRange'),ogzId:this.ogzId};
				getGsList(field).then(res=>{
					this.isHasDataFlag = true;
					this.gsList = res.data.datas;
				}).catch(err=>{
					this.isHasDataFlag = false;
				});
			},
			onNavigationBarButtonTap(e){
				if(e.index == 0){
					uni.navigateBack({
						delta:1
					})
				}
			},
			viewDet(id){
				uni.navigateTo({
					url:'../groupServiceDet/groupServiceDet?id=' + id + '&ogzId=' + this.ogzId
				})
			}
		}
	}
</script>

<style lang='scss'>
	.noGsOrder{
		font-size: $font-size26;
		text-align: center;
		color: $pss-text-colora;
		padding: 80rpx 0 !important;
		.noGsOrderImg{
			width: 392rpx;
			height: 268rpx;
			margin-bottom: 10rpx;
		}
	}
	.serviceWrap{
		padding: 0 30rpx;
		margin-top: -32rpx;
		position: relative;
		z-index: 2;
		.serviceItem{
			padding: 20rpx;
			background: linear-gradient(to bottom,#84ecff,#00c495);
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			.innerItem{
				padding: 20rpx;
				border-radius: 20rpx;
				background: rgba(255,255,255,.8);
				.serviceCon{
					padding: 20rpx;
					background: #fff;
					border-radius: 20rpx;
					.itemConBot{
						font-size: $font-size24;
						color: $pss-text-color8;
						align-items: center;
						margin:20rpx 0;
						.viewDet{
							width: 160rpx;
							height: 60rpx;
							line-height: 60rpx;
							border-radius: 8rpx;
							background: $pss-linear-gradient_1;
							text-align: center;
							color: #fff;
						}
					}
					.comItem{
						height: 50rpx;
						line-height: 50rpx;
						color: $pss-text-color3;
						font-size: $font-size28;
					}
				}
				.serviceName{
					display: flex;
					height: 70rpx;
					line-height: 70rpx;
					font-size: $font-size32;
					color: $pss-text-color3;
					font-weight: bold;
					.name{
						width: 78%;
					}
					.num{
						font-size: $font-size28;	
						font-weight: normal;
					}
					.lineView{
						margin: 0 10rpx;
						font-weight: normal;
						color: $pss-text-colora; 
					}
				}
			}
		}
	}
	.header{
		width: 750rpx;
		height: 776rpx;
		background: #20d3a8;
		z-index: 1;
		.headerTxt{
			width: 480rpx;
			height: 184rpx;
			left: 50%;
			margin-left: -240rpx;
			top: 90rpx;
		}
	}
	page{
		background: #20d3a8;
	}
</style>